<script setup>
  import {ref,onMounted} from "vue";
  import hospitalapi from '../api'
  import {ElMessageBox,ElMessage} from "element-plus";
  

  //绑定数据
  const tableData = ref([]);
  //控制新增信息窗口是否显示
  const addWinVisible = ref(false);
  //控制编辑信息窗口是否显示
  const editWinVisible = ref(false);
  //上传头像窗口控制
  const uploadImgWinVisible = ref(false);
  //新增数据绑定对象（双向绑定)
  const addObject = ref({});
  //编辑数据绑定对象（双向绑定）
  const editObject = ref({})
  //上传头像绑定的数据
  const imageUrl = ref({});

  //查询数据文本
  const checkObj = ref({
    page: 1,
    size: 5
  });
  const total = ref(90);

  //记录修改数据的下标
  var editIndex = -1
  //挂载页面时查询数据
  onMounted(function () {
    checkData();

  });
  const checkData = async function (val) {
    //相当于点了分页按钮
    if (typeof val == 'number') {
      checkObj.value.page = val
    }
    //查询数据
    let result = await hospitalapi.get("/api/user", checkObj.value)

    //更新表格中的数据
    tableData.value = result.data.list;
    total.value = result.data.count;

  }








  const del = function (index, row) {
    ElMessageBox.confirm(
      "确认要删除该行数据吗",
      "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }
    ).then(async function () {
      //提交数据
      let result = await hospitalapi.del("/api/user", row.id);
      if (result.code = 200) {
        //刷新表格数据
        tableData.value.splice(index, 1);
        //提示删除成功
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      } else {
        ElMessage({
          type: 'info',
          message: result.message
        })
      }

    })


  }
  //新增数据 addObject 
  const addSave = async function () {
    console.log("Sending data:", addObject.value);
    //发送请求
    let result = await hospitalapi.postJson("/api/user", addObject.value);
    tableData.value.unshift(result.data);
    //表格数据变更
    ElMessage({
      type: 'success',
      message: '保存成功',
    });
    //提示
    closeaddWin();
  }
  //保存编辑数据
  const editSave = async function (index) {
    editObject.value.img = imageUrl.value;
    //console.log(editObject.value);
    //发送请求
    let result = await hospitalapi.putJson("/api/user", editObject.value);
    //刷新表格
    tableData.value[editIndex] = result.data;
    //提示
    ElMessage({
      type: 'success',
      message: '保存成功',
    });
    editWinVisible.value = false;
  }
  //点击编辑按钮执行的方法
  const edit =async function (index, row) {
    //记录修改数据的下标
    editIndex = index;
    //绑定要修改的数据
    editObject.value.id = row.id;
    editObject.value.username = row.username;
    editObject.value.role = row.role;
    editObject.value.email = row.email;
    editObject.value.password = row.password;

    editObject.value.img = imageUrl.value;
    let result = await hospitalapi.get("api/userimg", editObject.value);
    console.log(result.data.img)
    if (result.data.img != null) {
      
      imageUrl.value = "api/img/" + result.data.img;
    } else {
      imageUrl.value = null;
    }


    //打开对话框
    editWinVisible.value = true;
  }



  //显示窗口
  const openaddWin = () => {
    addObject.value = {};
    addWinVisible.value = true;
  }
  const closeaddWin = () => {
    addWinVisible.value = false;
  }


  const uploadimg = function (index, row) {
    uploadImgWinVisible.value = true;
    console.log(uploadImgWinVisible.value);
    //显示该用户已经上传的头像

    editIndex = index;
    editObject.value = row;
  }

  const handleAvatarSuccess = function (result, uploadFile) {
    //console.log(result.data);
    // console.log(uploadFile);
    imageUrl.value = "api" + result.data;
  };

  const beforeAvatarUpload = function () {}

  const saveimg = async function () {
    //将文件的地址和数据id发送到后台保存
    editObject.value.img = imageUrl.value;
    let result = await hospitalapi.putJson("/api/userimg", editObject.value);
  }
</script>


<template>
  <el-input v-model="checkObj.id" style="width: 150px" placeholder="请填入查询的编号" />
  <el-input v-model="checkObj.username" style="width: 150px" placeholder="请填入查询的用户名" />

  <el-button type="success" @click="checkData">查询</el-button>
  <!-- 我认为新增加在这不合适 -->
  <!-- <el-button type="success" @click="addWinVisible=true">新增</el-button> -->
  <el-table :data="tableData" style="width: 100%">
<el-table-column label="头像" width="250">
      <template v-slot:default="scope">
        <el-image
          v-if="scope.row.img" 
          style="width: 80px; height: 80px; border-radius: 50%;"
          :src="'api/img/' + scope.row.img"
          fit="cover">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column prop="username" label="用户名" width="280" />
 
    <el-table-column prop="email" label="邮箱" width="380" />
    <el-table-column prop="role" label="职位" />

    <el-table-column label="操作"  width="300" label-class-name="center">
      <template v-slot:default="scope">
        <div>

          <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
          <el-button type="warning" @click="edit(scope.$index,scope.row)">编辑</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- current-page分页组件初始现实的页码  size：每业的条数 -->
  <el-pagination 
  :page-size="checkObj.size" 
  :current-page="checkObj.page" 
  background layout="prev, pager, next" :total="total" @current-change="checkData" />




  <!-- start 新增信息的弹出框 -->
  <el-dialog v-model="addWinVisible" title="新增" width="500">
    <el-form :model="addObject">


      <el-form-item label="用户名" label-width="80">
        <el-input v-model="addObject.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" label-width="80">
        <el-input v-model="addObject.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" label-width="80">
        <el-input v-model="addObject.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位" label-width="80">
  <el-select v-model="addObject.role" placeholder="请选择">
    <el-option label="管理员" value="admin"></el-option>
    <el-option label="用户" value="user"></el-option>
  </el-select>
</el-form-item>







    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- end 新增信息的弹出框 -->

  <!-- start 编辑信息的弹出框 -->

  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="editObject">
      <el-form-item label="头像" label-width="80">
      <el-upload class="avatar-uploader" action="/api/userimg" :show-file-list="false" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      </el-form-item>
      <el-form-item label="用户名" label-width="80">
        <el-input v-model="editObject.username" autocomplete="off" />
      </el-form-item>
 
      <el-form-item label="邮箱" label-width="80">
        <el-input v-model="editObject.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位" label-width="80">
  <el-select v-model="editObject.role" placeholder="请选择">
    <el-option label="管理员" value="管理员"></el-option>
    <el-option label="用户" value="用户"></el-option>
  </el-select>
</el-form-item>



    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- end 编辑信息的弹出框 -->


</template>



<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
.center {
  text-align: center;
}

/* 确保按钮宽度一致 */
.el-button {
  width: 80px; /* 根据需要调整按钮宽度 */
  margin: 0 10px; /* 按钮之间的间距 */
}

/* 如果需要，调整操作列的宽度 */
.el-table .el-table__body .center .cell {
  text-align: center;
}
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>